<template>
	<u-navbar :border-bottom="false" :is-back="false" title="康养基地" :background="{}">
		<view class="slot-wrap f1">
			<view class="text flex flex-jc-c flex-ai-c">
				<!-- 酒店列表 -->
			</view>
		</view>
	</u-navbar>
	<view class="mb_40">
		<cityList @click="clickCity" />
		<!-- <dateFilter :calendarData="inits.calendarData" @search="search" /> -->
	</view>
	<view style="padding: 0 30rpx">
		<hotelList :list="inits.list" />
		<u-loadmore bg-color="none" :status="inits.loadStatus" @loadmore="loadmore" v-if="inits.list.length"></u-loadmore>
	</view>
	<view style="height: 188rpx"></view>
	<tabbar :current="2" />
</template>

<script lang="ts" setup>
import dateFilter from '@/components/dateFilter.vue';
import hotelList from '@/components/hotelList.vue';
import { reactive, computed, watch } from 'vue';
import { useStore } from 'vuex';
import { onLoad, onShow,onReachBottom } from '@dcloudio/uni-app';
import hotel from '../../api/hotel.js';
import {calender} from '../../utils/getCalender.js';
import cityList from '@/components/cityList.vue';
const store = useStore();
const inits: any = reactive({
	calendarData: {
		start: {
			month: '00',
			day: '00',
			weekText: ''
		},
		end: {
			month: '00',
			day: '00',
			weekText: ''
		},
		diff: 1
	},
	list: [],
	page: 1,
	loadStatus: ''
});
const provice = computed(() => store.state.provice);
watch(
	() => provice.value,
	(v) => {
		inits.list = []
		inits.page = 1
		getHotelList()
	}
);
const clickCity = (v: AnyObject) => {
	if(provice.value == v.provice) return store.commit('SET_REGION', '');
	store.commit('SET_REGION', v.provice);
};
const getHotelList = async () => {
	moreStatus('loading')
	const res = await hotel.getHotelList({
		page: inits.page,
		size: 10,
		city: uni.getStorageSync('address').city,
		provice: provice.value,
		keyword: '',
		lat: uni.getStorageSync('address').lat,
		lng: uni.getStorageSync('address').lng
	});
	inits.list = [...inits.list, ...res.data];
	if (res.data.length < 10) return moreStatus('nomore');
	if (res.data.total <= 10) {
		moreStatus('nomore');
	} else {
		moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore');
	}
	if (res.data.length === 0) return false;
	inits.page += 1; // 当前页加1
};
const moreStatus = (status: string) => {
	inits.loadStatus = status;
};
const loadmore = () => {
	if (inits.loadStatus == 'nomore') return;
	getHotelList();
};
const search = (data) => {
	console.log(data);
};
const getTomorrowDate = () => {
	const res = calender();
	inits.calendarData.start = res.now;
	inits.calendarData.end = res.tomorrow;
	store.commit('CalendarData', {
		...inits.calendarData,
		start: inits.calendarData.start,
		end: inits.calendarData.end
	});
};
onReachBottom(() => {
	loadmore()
})
onShow(() => {
	if (store.state.calendarData) inits.calendarData = store.state.calendarData;
});
onLoad(() => {
	// getTomorrowDate();
	getHotelList();
});
</script>
<style>
page {
	background: #f7f7f7;
}
</style>
<style lang="scss" scoped></style>